* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: url(../images/blusky.jpg) no-repeat top center;
    height: 5.333333rem;
    line-height: 1.15;
    background-size: 100% 100%;
}

header {
    height: 0.8rem;
    background-color: rgba(220, 38, 38, 0.4);
    h1 {
        font-size: .333333rem;
        color: white;
        background-color:  rgba(231, 189, 189, 0.3);
        text-align: center;
        line-height: .533333rem;
    }
    .time{
        // height: .2rem;设置行高不设置高方便文字自动居中
        height: .2rem;
        width: 1.7rem;
        background-color: rgba(231,189,189,0.3);
        position: absolute;
        right: .3rem;
        top: .2rem;
        line-height: .266667rem;
        font-size: .093333rem;//字体适配没什么用
        
    }
}
.mainbox{
    background-color:  rgba(194, 243, 166, 0.7);
    height: 4.54rem;
    padding: .066667rem .066667rem 0;
    display: flex;
    .col{
       flex: 3;
       .module{
           position: absolute;
           height: 1.4rem;
           width: 2.68rem;
           background-color:rgba(220, 38, 38, 0.4);
           &::before{
               content: "";
               width: .066667rem;
               height: .066667rem;
               border-top: 2px solid black;
               border-left: 2px solid black; 
               position: absolute;
               top: 0;
              left: 0;
           }
           &::after{
            content: "";
            width: .066667rem;
            height: .066667rem;
            border-top: 2px solid black;
            border-right: 2px solid black; 
            position: absolute;
            top: 0;
            right: 0;
        }
        .module-foot{
            width: 100%;
            height: 0.1rem;
            background-color: rgba(245, 214, 112, 0.4);
            position: absolute;
            bottom: 0;
            &::before{
                content: "";
                width: .066667rem;
                height: .066667rem;
                border-bottom: 2px solid black;
                border-left: 2px solid black; 
                position: absolute;
                bottom: 0;
            }
            &::after{
                content: "";
                width: .066667rem;
                height: .066667rem;
                border-bottom: 2px solid black;
                border-right: 2px solid black; 
                position: absolute;
                bottom: 0;
                right: 0;
            }          
        }
        h1{
            text-align: center;
            color: white;
            font-size: .1rem;
            line-height: .133333rem;
        }
        .chart{
            width: 100%;
            height: 1.15rem;
            background-color: rgba(100,200,32,0.4);
        }

       }
    }
    .col:nth-child(2){
        flex: 5;
        .number-box{
            height: .666667rem;
            width: 4.366667rem;
            background-color: rgba(231, 189, 189, 0.3);
            margin: .12rem;
            padding:.066667rem;
            .number{
                display: flex;
                position: relative;
                height: .35rem;
                width: 4.166667rem;
                background-color: rgba(231, 189, 189, 0.3);
                &::before{
                    content: "";
                    position: absolute;
                    width: .266667rem;
                    height: .133333rem;
                    border-top: .013333rem solid black;
                    border-left: .013333rem solid black;
                }
                &::after{
                    content: "";
                    position: absolute;
                    width: .266667rem;
                    height: .133333rem;
                    border-bottom: .013333rem solid black;
                    border-right: .013333rem solid black;
                    bottom: 0;
                    right:0;
                }
                .number-col{
                    flex: 1;
                    h1{
                        text-align: center;
                        font-size: .266667rem;
                        
                    }
                }
                .number-col:nth-child(2){
                    &::before{
                        content: "";
                       position: absolute;
                       top: .07rem;
                       height: 50%;
                       width: .006667rem;
                       background-color: black;

                    }
               }
            }
            .font{
                display: flex;
                .font-col{
                    flex: 1;
                    text-align: center;
                    font-size: .133333rem;
                    line-height: .266667rem;
                }
            }
            
        }
       
    }
    .line{
        top: 2.35rem;
    }
    .pie{
        top:3.85rem;
    }
    .picture{
        height: 3.45rem;
        // width: 4.366667rem;
        background-color: rgba(231, 189, 189, 0.3);
        margin: .12rem;
        position: relative;
        .sky{
            width:3rem;
            height: 3rem;
            background:url(../images/sky.jpg) ;
            transform:translate(-50%,-50%);
            position: absolute;
            top: 50%;
            left: 50%;
            opacity: 0.3;
            background-size: 100% 100%;
            
            
        }
        .star{
            width:3rem;
            height: 3rem;
            background:url(../images/star.png) ;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            opacity: 0.3;
            background-size: 100% 100%;
            animation: rotate1 10s linear  infinite;
        }
        @keyframes rotate1 {
            from{transform:translate(-50%,-50%) rotate(0deg);}// 这里不能设置成from{transform: rotate(0deg);}，因为这个动画样式会覆盖原有的，所以要在动画里加上
            to{transform:translate(-50%,-50%) rotate(360deg);}
        }
    }
}


